<template>
    <div>
        <el-drawer
            v-model.sync="drawer"
            custom-class="zw_drawer"
            :direction="direction"
            :size="width"
            destroy-on-close
            @close="handleClose"
            @open="handleOpen">
            <template #title>
                <div class="drawer_tit" v-html="title"></div>
            </template>
            <template #default>
                <div class="content">
                    <slot></slot>
                </div>
            </template>
            <template #footer>
                <div>
                    <el-button v-show="isResetShow" @click="cancelClick">{{ resetMsg }}</el-button>
                    <el-button v-show="isShow" type="primary" @click="confirmClick">{{ drawerMsg }}</el-button>
                </div>
                <div v-show="showExamine">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="danger" @click="unqualified">不合格</el-button>
                    <el-button type="success" @click="qualified">合格</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const drawer = ref(false);
const title = ref('我是标题2');
const direction = ref('rtl');
const width = ref(425);
const drawerMsg = ref('提交');
const resetMsg = ref('重置');
const isShow = ref(true);
const isResetShow = ref(false);
const showExamine = ref(false);
const emit = defineEmits({
    submit: null,
    close: null,
    cancel: null,
    unqualified: null,
    qualified: null
});
const handleClose = () => {
    emit('close');
    drawer.value = false;
};
const handleOpen = () => {
    drawer.value = true;
};
const confirmClick = () => {
    emit('submit');
};
const cancelClick = () => {
    emit('cancel');
};
const cancel = () => {
    emit('cancel');
};
const unqualified = () => {
    emit('unqualified');
};
const qualified = () => {
    emit('qualified');
};
defineExpose({
    drawer,
    width,
    drawerMsg,
    title,
    isShow,
    isResetShow,
    showExamine
});
</script>
<style lang="scss">
.zw_drawer {
    .drawer_tit {
        font-family: PingFangSC-Medium, 'PingFang SC';
        font-weight: 500;
        color: #33302d;
        font-size: 16px;
    }

    .content {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;

        .main {
            position: absolute;

            // height: calc(100% - 60px);
            width: 100%;
            top: 0;
            bottom: 60px;

            .el-scrollbar__view {
                height: 100%;
            }
        }
    }
}
</style>
